vue3
<!-- author: xuett -->
<!-- date: 2025-07-07 16:06:18 -->
<!-- description:  -->
<template>
  <div class="chart-box">
    <v-chart ref="chart2" :option="chartOption" autoresize />
  </div>
</template>

<script setup>
import * as echarts from "echarts";

const getImgUrl = (fileName) => {
  return new URL(`../../../../assets/images/echarts/${fileName}.png`, import.meta.url).href;
};

const state = reactive({
  cardData: [
    {
      name: "太原市",
      value: 8789,
      color: ["#5aadea", "#416edd"]
    },
    {
      name: "晋城市",
      value: 6788,
      color: ["#6a4fbd", "#4c31a7"]
    },
    {
      name: "忻州市",
      value: 6677,
      color: ["#a0b1ca", "#5b72a0"]
    },
    {
      name: "运城市",
      value: 5624,
      color: ["#c68f57", "#d8b57e"]
    },
    {
      name: "临汾市",
      value: 4026,
      color: ["#70bc81", "#69b985"]
    }
  ],
  chartOption: {}
});
const { chartOption } = toRefs(state);

onMounted(() => {
  initChart();
});

//完成情况
const chart2 = ref();
const initChart = () => {
  let max = state.cardData[0].value;
  state.cardData.forEach((item) => {
    if (item.value > max) {
      max = item.value;
    }
  });
  max += 200;
  max = new Array(state.cardData.length).fill(max);
  // 绘制图表
  state.chartOption = {
    title: {
      text: "(万元)",
      right: "0",
      top: 0,
      textStyle: {
        color: "#fff",
        fontSize: 12
      }
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow"
      },
      backgroundColor: "#255DA9"
    },
    grid: {
      left: "4%",
      right: "2%",
      top: "12%",
      bottom: "3%",
      containLabel: true
    },
    xAxis: {
      type: "value",
      axisLabel: {
        color: "#FFFFFF",
        fontSize: 12
      },
      splitLine: {
        lineStyle: {
          color: "#B2C2D3",
          type: "dashed"
        }
      }
    },
    yAxis: [
      {
        type: "category",
        inverse: true,
        axisLabel: {
          color: "#FFFFFF",
          fontSize: 12
        },
        axisTick: {
          show: false
        },
        data: state.cardData.map((item) => item.name)
      },
      {
        type: "category",
        inverse: true,
        axisTick: "none",
        axisLine: "none",
        show: true,
        axisLabel: {
          color: "#ffffff",
          fontSize: "12"
        },
        data: state.cardData.map((item) => item.value)
      }
    ],
    series: [
      {
        // 火
        type: "pictorialBar",
        symbol: `image://${getImgUrl("fire")}`,
        symbolSize: [12, 14],
        symbolOffset: [7, -2],
        symbolPosition: "end",
        zlevel: 3,
        tooltip: {
          show: false
        },
        data: state.cardData
          .map((item) => {
            return {
              name: item.name,
              value: item.value
            };
          })
          .slice(0, 3)
      },
      {
        name: "经营销售",
        type: "bar",
        barWidth: 8,
        zlevel: 1,
        data: state.cardData.map((item) => {
          return {
            value: item.value,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 0,
                  color: item.color[1] //结束颜色
                },
                {
                  offset: 1,
                  color: item.color[0] // 起始颜色
                }
              ])
            }
          };
        })
      },
      {
        name: "背景",
        type: "bar",
        barWidth: 8,
        barGap: "-100%",
        data: max,
        itemStyle: {
          color: "#2a3c6c"
        }
      }
    ]
  };
};
</script>

<style scoped lang="scss">
.chart-box {
  width: 100%;
  height: 100%;
  padding: 15px;
  background-color: #000;
}
</style>
